<template>
	<view class="fundsPass_wrapper">
		<view v-if="hasFundsPassword == 2">
			<view class="form_item">
				<uni-icon type="person" size="25" class="form_item--icon"></uni-icon>
				<input type="text" v-model="mobile" placeholder="请输入手机号码" />
			</view>
			<view class="form_item">
				<uni-icon type="chatbubble" size="25" class="form_item--icon"></uni-icon>
				<input type="text" v-model="verifyCode" placeholder="请输入手机验证码" />
				<button type="warn" size="mini" class="verify_btn" :disabled='disabledVerify' @click="getVerifyCode">{{codeText}}</button>
			</view>
			<view class="form_item">
				<uni-icon type="locked" size="25" class="form_item--icon"></uni-icon>
				<input type="text" v-model="fundsPassword" placeholder="请输入资金密码" />
			</view>
			<view class="form_item">
				<uni-icon type="locked" size="25" class="form_item--icon"></uni-icon>
				<input type="text" v-model="confirmPassword" placeholder="请确认资金密码" />
			</view>
			<button type="warn" class="form_btn" :disabled='disabledSubmit' @click="setFundsPassword">设置</button>
			
			<view class="form_tips">
				<view>注：</view>
				<view class="tips_content">
					<text>为确保您的资金安全，发起申请后，会有客服联系您核实信息。</text>
					<text>您也可直接联系客服进行修改密码</text>
					<text>客服QQ：12345678</text>
				</view>
			</view>
		</view>
		<view class="funds_tips" v-else>
			<text>资金密码已设置</text>
			<text>请您直接联系客服进行修改密码</text>
			<text>客服QQ：12345678</text>
		</view>
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon/uni-icon.vue";
	export default {
		data() {
			return {
				mobile: '', 					// 手机号
				verifyCode: '', 				// 验证码
				fundsPassword:'', 				// 资金密码
				hasFundsPassword: 2,			// 是否设置了资金密码
				confirmPassword:'',				// 确认资金密码
				codeText: '获取验证码', 			// 验证码按钮文本
				countdown: 60,	 				// 倒计时
				disabledVerify:false,   		// 禁用验证码按钮
				disabledSubmit:false,			// 禁用提交按钮
				countDownInterval:null          // 倒计时定时器
			}
		},
		onReady(){
			this.hasFundsPassword = uni.getStorageSync('user_info').baseInfo.if_pay_pws;
		},
		methods: {
			// 倒计时
			countDownFn(){
				this.codeText = '60S';
				this.disabledVerify = true;
				this.countDownInterval = setInterval(() => {
					this.countdown--;
					if (this.countdown > 0){
						this.codeText = this.countdown + 'S';
					} else {
						clearInterval(this.countDownInterval);
						this.countdown = 60;
						this.disabledVerify = false;
						this.codeText = '获取验证码';
					}
				}, 1000)
			},
			
			// 获取验证码
			getVerifyCode() {

				if (this.mobile === '') {
					uni.showToast({
						title:'请输入手机号',
						icon:'none'
					});
					return
				}
				if (!this.$util.checkMobile(this.mobile)) {
					uni.showToast({
						title:'手机号格式有误',
						icon:'none'
					})
					return
				}
				if (this.countdown !== 60) return;
				
				this.countDownFn();
				
				this.$api.getVerifyCode({
					mobile: this.mobile,
					type: 'register'
				}, res => {
					if(res.data.type !== 'ok') {
						// 用户名已存在
						clearInterval(this.countDownInterval);
						this.disabledVerify = false;
						this.codeText = '获取验证码';
					}
					uni.showToast({
						title:res.data.message,
						icon:'none'
					});
				})
			},

			// 设置资金密码事件
			setFundsPassword() {

				if (this.mobile === '') {
					uni.showToast({
						title:'请输入手机号',
						icon:'none'
					});
					return
				}
				if (!this.$util.checkMobile(this.mobile)) {
					uni.showToast({
						title:'手机号格式有误',
						icon:'none'
					})
					return
				}
				
				if (this.verifyCode === '') {
					uni.showToast({
						title:'验证码不能为空',
						icon:'none'
					});
					return;
				};
				
				if (this.fundsPassword === '') {
					uni.showToast({
						title:'请设置您的密码',
						icon:'none'
					});
					return;
				};
				
				if (this.fundsPassword.length < 6 || this.fundsPassword.length > 16) {
					uni.showToast({
						title:'密码必须在6到16位之间',
						icon:'none'
					});
					return;
				};
				
				if (this.confirmPassword !== this.fundsPassword) {
					uni.showToast({
						title:'两次输入的密码不一致',
						icon:'none'
					});
					return;
				};
				
				this.disabledSubmit = true  // 禁用按钮，避免重复提交
				
				this.$api.setFundsPass({
					mobile: this.mobile,
					password: this.fundsPassword,
					msg_code: this.verifyCode,
				}, res => {
					if (res.data.type === 'ok') {
						uni.showToast({
							title:res.data.message
						});
						setTimeout(() => {
							uni.navigateBack({
							    delta: 1
							});
						}, 1500)
					} else {
						this.disabledSubmit = false
						uni.showToast({
							title:res.data.message,
							icon:'none'
						});
					}
				})
			}
		},
		components:{
			uniIcon
		}
	}
</script>

 <style lang="scss" scoped>
 .fundsPass_wrapper{
	 height:100vh;
 	.form_item{
 		position:relative;
		height:100upx;
		border-bottom:1px solid #F5F5F5;
		.form_item--icon{
			position:absolute;
			top:20upx;
			left:50upx;
		}
 		input{
 			display: block;
 			width:100%;
 			height:100upx;
			line-height:100upx;
 			padding:0 120upx;
 			box-sizing: border-box;
 			background-color: #FFFFFF;
 		}
 		.verify_btn{
 			position:absolute;
 			top:20upx;
 			right:20upx;
			z-index:999;
			border-radius: 50upx;
			background-color: #E03E4D;
 		}
 	}
 	.form_btn{
 		width:90%;
 		margin-top:60upx;
		border-radius: 50upx;
		background-color: #E03E4D;
 	}
	.form_tips{
		width:85%;
		margin:40upx auto;
		display: flex;
		color:#999999;
		.tips_content{
			text{
				display: block;
				font-size: 14px;
			}
		}
	}
	
	.funds_tips{
		height: 90%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text{
			font-size: 15px;
			margin:10upx 0;
		}
		text:first-child{
			color:#E03E4D;
		}
	}
 }
 </style>
 